<script setup lang="ts">
import { computed } from 'vue'
// defineOptions({ name: 'NewView' })
import { isCollapse } from '@/components/collapse'
import { getImageUrl } from '@/utils/tools'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const current = computed(() => userStore.currentMenu)
const logout = () => {
  userStore.removeToken()
  window.location.href = '/login'
}
</script>

<template>
  <div class="header">
    <div class="left">
      <el-icon class="icon" @click="isCollapse = !isCollapse">
        <Menu></Menu>
      </el-icon>
      <el-breadcrumb separator="/" class="bread">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="current" :to="current.path">{{ current.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="right">
      <el-dropdown>
        <el-button class="avatar" link size="small">
          <el-avatar class="avatar" :src="getImageUrl('user')" />
          <!-- <span class="username" style="color: #fff; margin-left: 5px">admin</span> -->
          <el-icon style="height: 18px; color: #fff">
            <CaretBottom />
          </el-icon>
          <!-- <component :is="CaretBottom" style="height: 18px; color: #fff" /> -->
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  height: 60px;
  background-color: #666;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
    padding-left: 10px;

    .icon {
      margin-right: 10px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }

  .right {
    display: flex;
    align-items: center;
    padding-right: 10px;
  }

  :deep(.bread span) {
    color: #fff;
  }
}
</style>
